<template>
  <div>当前鼠标位置</div>
  <div>x: {{ mouse.x }}</div>
  <div>y: {{ mouse.y }}</div>
  <div>当前点击次数：{{ count }}</div>
  <button @click="add">点击</button>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref } from 'vue';

const mouse = reactive({
  x:1,
  y:2
})

const count = ref(0)

const add = () => {
  count.value++
}

const handlemouse =  (e:MouseEvent)=> {
  mouse.x = e.pageX
  mouse.y = e.pageY
}


onMounted(() => {
  document.addEventListener('mousemove',handlemouse)
})


onUnmounted(() => {
    document.removeEventListener('mousemove',handlemouse)
})

</script>

<style scoped>

</style>